<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%;">
<head>	
	<title>案件枚数生産性検索</title>

	<jsp:include page="../basePage/head.jsp" />	 
    <jsp:include page="../basePage/jqplot.jsp" />   
    <script src="./js/util/globalajaxevent.js"></script>
       
    <style>
		    .ui-datepicker-calendar {display: none;}
   	</style>   
	<style type="text/css">	
		#caseName{width:100px;}	 
	</style>  
 <script>
  	
	 $(function() {
		 
		var exportExcel = '${exportExcel}';
		if (exportExcel=='true'){
			$('#buttonExport').show();
		}else{
			$('#buttonExport').hide();
		}
		
		
		//设置默认日期
		 var d = new Date();
		// d.setDate(d.getDate() -1);
		 var toDate =formatDate(	d.getFullYear()+'-'+(d.getMonth()+ 1));
		 var fromDate =formatDate(	(d.getFullYear() -1)+'-'+(d.getMonth()+ 1) );
		 
		//日期选择框格式化
 		//$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);;
		//$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);  
		  
		 initDatepicker('dateFrom',fromDate);
		 initDatepicker('dateTo',toDate);
 		    
		$( "#buttonExport").button().click(function( event ) {
			$('#dataForm').attr('action','caseNumberEfficiencyExport!export.action').submit();
		});
		 
		$( "#buttonSearch" ).button().click(function( event ) {			 
		
		$('#chartdiv,#CaseNumberEfficiency').empty();
		 	
		$.ajax({
			        type: "POST",
			        async: true,
			        url:"caseNumberEfficiencyQuery!refreshData.action",
			        data:$('#dataForm').serialize(),
					success: function (data) {
						if(data == null ||
						   data.length==0 || 
						   data.chartData ==0 ||
						   data.chartData.CaseNumberEfficiency ==0 ){
							
							 $( "#noResult" ).dialog({modal:true});
							return;
						}
												
						outputGrid('CaseNumberEfficiency',data.chartData.CaseNumberEfficiency,"案件枚数生産性統計情報");
						
						outputChart('chartdiv',data);						
					},
			        error: function (err) {
						alert(err);
			        }
				});
		 });
 		$(window).bind('resize', function() { 
		 	$("#gridTable").setGridWidth($("#dataForm").width()-5);
		 	$("#gridTable").setGridHeight ($(window).height()-$("#dataForm").height()-108);
		}).trigger('resize');
	});	 
	
	 function outputGrid(target,data,caption){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		
			
			 //set column width	
			  var ColModel='';
			  var Colwidth = 0;
			  for(var i=0;i<data[0].length  ;i++){				 							
			   if ( ColModel.length>0){
				   ColModel += ',';} 
			       
			       if (i==0){
			    	   Colwidth = 60;
			       } else if (i==1){
			    	   Colwidth = 40;
			       }
			       else {
			    	   Colwidth = 60;
			       }
			  
				   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "center",sortable:false} '; 
			  }  ;
			  
	  		//tableToGrid(target + ' table',{
	  	     tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,
	        	colModel:eval("([" + ColModel + "])"),
				shrinkToFit: false
				 ,gridComplete:function(){				
					 formatTable(target); 
				 }    
	  		  });        
		};	
	function formatTable(target){ 		  		  	
		$('#' + target + '_datagrid tr').each(function(){
			
		   $(this).children("td").eq(1).nextAll().css("text-align",'right'); 		 
		   $(this).children("td").eq(0).css("text-align",'center');  
		   $(this).children("td").eq(1).css("text-align",'center');
		   
		 	/* var v=$.trim( $(this).children("td").eq(1).text());
		 	
			 if ( v=="生産性"){
				$(this).children("td").css("background", "#FAFAFA");
			}
			else{
				//$(this).children("td").eq(0).css("background", "#E4FFE4");
			} */
		});	 
	}
	
	function outputChart(target,data){
		$('#' + target).empty();
		if(data == null ||
		   data.length==0 || 
		   data.chartData ==0  )  return;
		    
		$.jqplot(target, 
				  [data.chartData.AFK,
				   data.chartData.AFS,
				   data.chartData.HW,
				   data.chartData.KPK,
				   data.chartData.KPT,
				   data.chartData.LEOH,
				   data.chartData.NEO,
				   data.chartData.NS,
				   data.chartData.OS,
				   data.chartData.RSK,
				   data.chartData.SLD,
				   data.chartData.SLK,
				   data.chartData.SYN,
				   data.chartData.TK,
				   data.chartData.WBM,
				   data.chartData.WBP], {		    
				    // Turns on animatino for all series in this plot.
	        		animate: true,
	        		// Will animate plot on calls to plot1.replot({resetAxes:true})
	        		animateReplot: true,
		     		//动画用      
		    		axesDefaults: {pad: 0},		            
	        		//图例
		        		legend:{show:true,
		        			placement : "outsideGrid",
		        			location: 's', 
		        			fontFamily: 'MS PGothic',
		        			fontSize: '8pt',
		        			renderer: $.jqplot.EnhancedLegendRenderer,
		        			rendererOptions: {numberColumns: 8}
		        			},			     
		     		//柱状图
		    		series:[
 							{label: 'AFK生産性'},
							{label: 'AFS生産性'},
							{label: 'HW生産性'},
							{label: 'KPK生産性'},
							{label: 'KPT生産性'},
							{label: 'LEOH生産性'},
							{label: 'NEO生産性'},
							{label: 'NS生産性'},
							{label: 'OS生産性'},
							{label: 'RSK生産性'},
							{label: 'SLD生産性'},
							{label: 'SLK生産性'},
							{label: 'SYN生産性'},
							{label: 'TK生産性'},
							{label: 'WBM生産性'},
							{label: 'WBP生産性'}, 											
		                    {xaxis:'xaxis', yaxis:'yaxis'
		                    },
		                    {rendererOptions: {animation: {speed: 2000}}
		                    }],
				             //折线图
				    		seriesDefaults: {rendererOptions: {
				    	          smooth: true
				            }},		  
				     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
		        				   tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}								
				    				},  
			  	    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
				      			   /* x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}}, */
					      		   // yaxis: { min:0,max:1000,tickInterval:100 ,tickOptions:{formatString:'%.0f人'} },
					      		      yaxis: { min:0,autoscale:true, tickOptions: {showGridline: true }},
				      			   /* y2axis: { autoscale:true,min:0,max:800,tickInterval:200 ,tickOptions: {showGridline: true}} */
				    			  	},
				 			//mark上高亮    
			     			highlighter: {
			     				show: true,
			     				sizeAdjust: 7.5,
			     				tooltipAxes: 'y'
			     				},
			      			//鼠标移动 显示坐标位置数据
			      			cursor: {show: false},		      				     			
				  });
			};			  
	</script>

</head>
<body>

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>時間帯</th><td><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>～</th><td><s:textfield id="dateTo" name="dateTo" key="value" label="结束日"  cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" class="button">検索</a></td>			
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>
			<td>
				<span id="myIndicator"  >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>
 
<hr>
<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">  	
	<div id="CaseNumberEfficiency"  class="grid"></div>
	<div id="chartdiv" style="height:400px;border:1px"  ></div> 
</div>

<div id="noResult" title="メッセージ" style="display:none;">
  <p>该当する検索结果がありません。</p>
  <p>别の条件でもう一度検索してください。</p>
</div>

</body>
</html>